<template>
  <div class="regBox">
    <div class="regBox-header">
      <div class="header-left">
        <router-link to="/"
          ><img src="../assets/img/4.png" alt=""
        /></router-link>
        <span>欢迎登录</span>
      </div>
      <!-- <div class="header-right"> -->

      <router-link to="/LogUserIdea">登录页面，调查问卷</router-link>
      <!-- </div> -->
    </div>
    <div class="regBox-body">
      <div class="body-white">
        <div class="body-header">
          <span>手机登录</span>
          <!-- <button>X</button> -->
        </div>
        <div class="bodyCenter">
          <div class="body-litBody">
            <div class="body-input">
              <div class="divPhone">
                <input
                  type="text"
                  v-model="phone"
                  @blur="getPhone()"
                  class="phone"
                  placeholder="请输入手机号码"
                />
                <p
                  id="idPhone"
                  :class="elPhone == true ? 'warningone' : 'successone'"
                  v-if="flagone"
                >
                  {{ phoneContent }}
                </p>
              </div>
              <div class="divPwd">
                <input
                  type="password"
                  v-model="pwd"
                  class="pwd"
                  placeholder="请输入密码"
                />
              </div>
            </div>
            <div class="body-tip">
              <button>短信登录</button>
              <!-- <button>密码登录</button> -->
              &nbsp;&nbsp;&nbsp;
              <input type="radio" />自动登录
            </div>
            <div class="body-regButton">
              <button @click="getLogin()">登录</button>
              <p></p>
            </div>
          </div>
          <hr />
          <div class="body-footer">
            <a href="#" class="else">其他登录方式</a>

            <router-link to="/register" class="toLogin"
              >还没账号？快免费注册</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      elPhone: "",
      flagone: "",
      pwd: "",
      phoneContent: "",
    };
  },
  methods: {
    getPhone() {
      var url = "cellphone/existence/check?phone=" + this.phone;
      this.axios.get(url).then((res) => {
        console.log("log:", res);
        if (res.data.exist == '-1') {
          this.flagone = true;
          this.phoneContent = "该手机号码未被注册,请先去注册";
          this.elPhone = true;
          return;
        }
      });
    },
    getLogin() {
      // var url = `login/cellphone?phone=${this.phone}&password=${this.pwd}`;
      var url = "http://localhost/userInfo.json"
      this.axios.get(url).then(res=>{
        console.log('login:',res);
         if (res.data.code != 200) {
          alert('手机号或者密码错误')
          return;
        }
        this.logNickName=res.data.profile.nickname;//注册用户的昵称
        this.log.headImg=res.data.profile.avatarUrl;//注册用户的头像

        this.$router.push('/')
      })

    },
  },
};
</script>

<style lang="scss" scoped>
#idPhone{
  margin-top: 0;
}
.warningone {
  margin: 20px 0 20px 0;
  font-size: 12px;
  color: rgb(236, 10, 10);
}
.successone {
  margin: 20px 0 20px 0;
  color: rgb(62, 237, 62);
  font-size: 12px;
}
</style>

<style scoped src="../assets/css/login.css"></style>
